<template>
  <div class="dashboard-container">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card class="dashboard-card">
          <template #title>
            <span class="card-title">鱼类种类</span>
          </template>
          <div class="card-content">
            <div class="card-value">{{ statistics.speciesCount }}</div>
            <div class="card-description">已记录鱼类种类</div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="dashboard-card">
          <template #title>
            <span class="card-title">分布区域</span>
          </template>
          <div class="card-content">
            <div class="card-value">{{ statistics.regionsCount }}</div>
            <div class="card-description">已记录分布区域</div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="dashboard-card">
          <template #title>
            <span class="card-title">年产量</span>
          </template>
          <div class="card-content">
            <div class="card-value">{{ statistics.yearlyProduction }}万吨</div>
            <div class="card-description">2023年总产量</div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="dashboard-card">
          <template #title>
            <span class="card-title">增长率</span>
          </template>
          <div class="card-content">
            <div class="card-value">{{ statistics.growthRate }}%</div>
            <div class="card-description">同比增长</div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="12">
        <a-card title="渔业产量趋势">
          <div ref="productionTrendChart" style="height: 350px"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="渔业分布情况">
          <div ref="distributionChart" style="height: 350px"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="24">
        <a-card title="主要鱼类种类占比">
          <div ref="speciesChart" style="height: 350px"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { useFishProductionStore } from '@/stores/fishProductionStore';
import { fishSpeciesApi, fishDistributionApi } from '@/api/index'

const { proxy } = getCurrentInstance();
const productionTrendChart = ref(null);
const distributionChart = ref(null);
const speciesChart = ref(null);
const productionStore = useFishProductionStore();

const statistics = ref({
  speciesCount: 128,
  regionsCount: 35,
  yearlyProduction: 7320,
  growthRate: 3.8
});

onMounted(async () => {
  await productionStore.fetchProductionData();
  const regionalData = await productionStore.fetchRegionalData();
  const speciesData = await productionStore.fetchSpeciesProductionData();
  const speciesRes = await fishSpeciesApi.getCount();
  const distributionRes = await fishDistributionApi.getCount();
  if (speciesRes.code === 0) {
    statistics.value.speciesCount = speciesRes.data; 
  }
  if (distributionRes.code === 0) {
    statistics.value.regionsCount = distributionRes.data; 
  }
  initProductionTrendChart();
  initDistributionChart(regionalData);
  initSpeciesChart(speciesData);
});

const initProductionTrendChart = () => {
  const chartDom = productionTrendChart.value;
  const myChart = proxy.$echarts.init(chartDom);
  
  const years = productionStore.productionData.map(item => item.year);
  const totalProduction = productionStore.productionData.map(item => item.totalProduction);
  const marineProduction = productionStore.productionData.map(item => item.marineProduction);
  const freshwaterProduction = productionStore.productionData.map(item => item.freshwaterProduction);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['总产量', '海水产量', '淡水产量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: years
    },
    yAxis: {
      type: 'value',
      name: '产量 (万吨)'
    },
    series: [
      {
        name: '总产量',
        type: 'line',
        data: totalProduction,
        smooth: true,
        lineStyle: {
          width: 3
        }
      },
      {
        name: '海水产量',
        type: 'bar',
        stack: 'total',
        data: marineProduction
      },
      {
        name: '淡水产量',
        type: 'bar',
        stack: 'total',
        data: freshwaterProduction
      }
    ]
  };
  
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

const initDistributionChart = (regionalData) => {
  const chartDom = distributionChart.value;
  const myChart = proxy.$echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} 万吨 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: regionalData.map(item => item.region)
    },
    series: [
      {
        name: '区域产量',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: regionalData.map(item => ({
          value: item.production,
          name: item.region
        }))
      }
    ]
  };
  
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

const initSpeciesChart = (speciesData) => {
  const chartDom = speciesChart.value;
  const myChart = proxy.$echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: '产量 (万吨)'
    },
    yAxis: {
      type: 'category',
      data: speciesData.map(item => item.species),
      axisLabel: {
        interval: 0,
        rotate: 30
      }
    },
    series: [
      {
        name: '产量',
        type: 'bar',
        data: speciesData.map(item => item.production),
        label: {
          show: true,
          position: 'right',
          formatter: '{c} 万吨'
        },
        itemStyle: {
          color: function(params) {
            const colorList = [
              '#5470c6', '#91cc75', '#fac858', '#ee6666', 
              '#73c0de', '#3ba272', '#fc8452', '#9a60b4'
            ];
            return colorList[params.dataIndex % colorList.length];
          }
        }
      }
    ]
  };
  
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};
</script>

<style scoped>
.dashboard-container {
  padding: 10px 10px 0;
}

.dashboard-card {
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
}

.card-content {
  text-align: center;
  padding: 10px 0;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #1890ff;
}

.card-description {
  font-size: 14px;
  color: #8c8c8c;
  margin-top: 5px;
}
</style> 